<script setup>
import {
  reactive,
  computed,
  ref,
  h,
  createVNode,
  onMounted,
  onUnmounted,
  watch,
  nextTick,
} from "vue";

import { nanoid } from "nanoid";
import {
  CloseOutlined,
  CheckOutlined,
  LoadingOutlined,
  PlusCircleOutlined,
  LeftOutlined,
  RightOutlined,
  ExclamationCircleOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
// import request from "@/common/utils/request";

import Ai_style from "./Ai_style.vue";

// 文案库组件
import CopyLibraryModal from "@/components/AddTextModal/CopyLibraryModal.vue";
const copyLibraryModal = ref(null);

import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import request from "@/common/utils/request";
// 素材库
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";
// 仓库
import { useStore } from "vuex";
const store = useStore();

const emit = defineEmits([
  "getTemplateData:modelData",
  "cancel",
  "changeChecked:id",
]);
const props = defineProps({
  ai_requestData: {
    type: Object,
    default: () => {
      return {};
    },
  },
  aiModelList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
// 路由信息
const queryData = computed(() => {
  return {
    viewType: route.query?.viewType, // 1模板详情, 2混剪详情
    isAi: route.query?.isAi, // true 为ai页面过来的
    id: route.query?.id, // 详情id
    unique_id: route.query?.unique_id, // 爆破款文案库使用时,请求详情携带的唯一id
  };
});

// 仓库中的混剪数据
const VideoMashup = computed(() => {
  return store.state.shotstack.VideoMashup;
});

// 当前编辑预览的视频组
const currentDrawerIndex = computed({
  get() {
    return store.state.shotstack.currentIndex;
  },
  set(val) {
    store.commit("CHANGE_CURRENT_INDEX", val);
  },
});

// 仓库中的克隆字幕数据
const subTitle = computed(() => {
  return store.state.shotstack.Subtitles;
});

// 仓库中的轮询轮询开关
const AiCreatSwitch = computed({
  get() {
    return store.state.shotstack.AiCreatSwitch;
  },
  set(val) {
    store.commit("SET_AICREAT_SWITCH", val);
  },
});

/**
 * 当前选择的比例
 * 0 9:16
 * 1 16:9
 * 2 1:1
 * 3 自定义
 */
const proportion = computed({
  get() {
    return VideoMashup.value.proportion;
  },
});

// 筛选所有的ai生成图
const imgList = computed(() => {
  // debugger
  return (
    subTitle.value?.[currentDrawerIndex.value?.index]?.material_list.filter(
      (ele) => {
        return (
          ele.scene_type == "image" &&
          Object.keys(ele).find((i) => i == "scene_des")
        );
      }
    ) || []
  );
});

const state = reactive({
  visible: false,
  currentId: "",
  text: "",
  // 抽屉中的详情数据
  detailData: {},
  // 顶部标题信息
  title_top: "",
  // loding
  spinning: false,
  // 当前选择的项的文本
  currentText: "",
  // ai模型列表收起和展开数
  sliceNum: 12,
});

// ai绘画模型列表组件
const Ai_styleRef = ref(null);

// 视频组 获取ai视频发送请求 需要的参数
const modelId = computed(() => {
  return Ai_styleRef.value?.requestData || {};
});

// 加载中 icon
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: "34px",
  },
  spin: true,
});

// 点击确定 emit 父组件调用接口获取模板内容
const submitConfirm = () => {
  const cloneSubTile = JSON.parse(JSON.stringify(subTitle.value));
  // 判断是否还有正在生成的内容
  // debugger
  const createIng = cloneSubTile.some((item) => {
    return item.material_list.some(
      (e) => e.material_url == "" || e.creatLoading == true
    );
  });
  if (createIng) {
    Modal.confirm({
      title: "提示",
      icon: createVNode(ExclamationCircleOutlined),
      content:
        "当前有未绘制或正在生成的内容, 此时导入素材,这些素材将不会保存,是否继续?",
      cancelText: "等待生成",
      okText: "确认保存",
      onOk() {
        AiCreatSwitch.value = false;
        // 去除视频组中所有空的素材
        cloneSubTile.forEach((item) => {
          item.material_list = item.material_list.filter((i) => {
            return !!i.material_url;
          });
        });
        store.commit("SET_VIDEOMASHUP_ITEM", {
          key: "resource_data",
          value: cloneSubTile,
        });
        emit("changeChecked", modelId.value.modelId);

        state.visible = false;
      },
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      onCancel() {},
    });
  } else {
    store.commit("SET_VIDEOMASHUP_ITEM", {
      key: "resource_data",
      value: cloneSubTile,
    });
    emit("changeChecked", modelId.value.modelId);

    state.visible = false;
  }

  // store.commit('INIT_SUBTITLES_DATA',cloneSubTile)
};

// 选择某项图片
const selectItem = (id) => {
  state.currentId = state.currentId == id ? "" : id;
};

// 当前选择的图片描述信息
const currentScene_des = computed({
  get() {
    return (
      imgList.value.find((ele) => {
        return ele.id == state.currentId;
      })?.scene_des || ""
    );
  },

  set(val) {
    // state.currentText = val
    imgList.value.find((ele) => {
      return ele.id == state.currentId;
    }).scene_des = val;
    store.commit("INIT_SUBTITLES_DATA", subTitle.value);
  },
});
// 当前选择图片的img
const currentImgUrl = computed({
  get() {
    return (
      imgList.value.find((ele) => {
        return ele.id == state.currentId;
      })?.material_url || ""
    );
  },

  set(val) {
    imgList.value.find((ele) => {
      return ele.id == state.currentId;
    }).material_url = val;
  },
});

// 当前选择项是否在加载中
const creatLoading = computed(() => {
  return (
    imgList.value.find((ele) => {
      return ele.id == state.currentId;
    })?.creatLoading || false
  );
});

// 当前选择项的展示文本信息
const currentText = computed(() => {
  return (
    subTitle.value?.[currentDrawerIndex.value?.index]?.tts_config?.[0]
      ?.subtitle?.[0]?.text || ""
  );
});

const getImgTimeId = ref([]);
const editPromiseArr = ref([]); // 异步队列
// const timeIds = ref([])
// 获取ai图片
const getAiImgFn = async (getImgParams, ele, resolve, reject) => {
  // 存放当前的下标到函数内
  const currentIndex = currentDrawerIndex.value.index;
  // 异步开关 关闭, 取消轮询
  if (!AiCreatSwitch.value) return;
  let timeId = "";
  const res = await request.get(
    "work_ai",
    "/user/shotstack/textXf/image",
    getImgParams
  );
  console.log(res, " 文生图发起请求");

  // 轮询结束
  if (
    !Object.keys(res).find((ele) => ele == "task_id") &&
    res?.result?.process == "done"
  ) {
    timeId && clearTimeout(timeId);
    const targetData = subTitle.value[currentIndex].material_list;
    let targetIndex = targetData.findIndex((i) => i.id == ele.id);
    if (
      Object.keys(res.result).some((e) => e == "aiImage") &&
      res.result.aiImage != ""
    ) {
      // 存放链接
      targetData[targetIndex].material_url = res.result.aiImage;
      // 存放 文件大小
      targetData[targetIndex].material_size = res.result.material_size;
      // 存放后缀
      targetData[targetIndex].material_extension =
        res.result.material_extension;
      // 存放路径地址
      targetData[targetIndex].material_path = res.result.material_path;

      targetData[targetIndex].creatLoading = false;

      store.commit("INIT_SUBTITLES_DATA", subTitle.value);
    } else {
      // 删除当前的ai空图片
      if (res.result.message != "") {
        message.warning(res.result.message);
      }
      targetData[targetIndex].creatLoading = false;
    }
    state.spinning = false;

    resolve(res.result.aiImage);
  } else {
    timeId = setTimeout(() => {
      if (!Object.keys(getImgParams).find((ele) => ele == "task_id")) {
        getImgParams.task_id = res.task_id;
      }
      getAiImgFn(getImgParams, ele, resolve, reject);
    }, 3000);
    let timeIndex = getImgTimeId.value.findIndex((i) => i == timeId);
    timeIndex == -1 && getImgTimeId.value.push(timeId);
  }
};

// 重绘当前画面
const creatAiImg = () => {
  if (currentScene_des.value.trim() == "")
    return message.error("请输入描述文案!");
  // state.spinning = true;
  // 素材名称
  // 开启轮询开关
  AiCreatSwitch.value = true;
  const editTarget = subTitle.value[
    currentDrawerIndex.value.index
  ].material_list.find((ele) => ele.id == state.currentId);
  // editTarget.scene_des = state.text.trim();
  // 当前重绘项开始加载
  editTarget.creatLoading = true;
  const findIndex = editPromiseArr.value.findIndex(
    (ele) => ele.id == editTarget.id
  );

  if (findIndex != -1) {
    editPromiseArr.value[findIndex].promise();
  } else {
    editPromiseArr.value.push({
      id: editTarget.id,
      promise() {
        let size = "";
        if (proportion.value == 0) {
          size = "9:16";
        } else if (proportion.value == 1) {
          size = "16:9";
        } else if (proportion.value == 2) {
          size = "1:1";
        }

        console.log(modelId.value, "modelId");
        // return
        const params = {
          feature: "text2image",
          // text_split_id: ,
          scene_des: currentScene_des.value.trim(),
          text_split_id: editTarget.from_id,
          // 携带两个模型的id
          modelId: modelId.value.modelId,
          feature_id: modelId.value.feature_id,
          // 讯飞需要携带宽高
          // width: 512,
          // height: 512,
          width: VideoMashup.value.width,
          height: VideoMashup.value.height,
          // 需要的比例
          size,
        };
        new Promise((resolve, reject) => {
          try {
            getAiImgFn(params, editTarget, resolve, reject);
          } catch (error) {
            state.spinning = false;
            editTarget.creatLoading = false;
            reject(new Error("文生图失败!"));
          }
        });
      },
    });
    editPromiseArr.value[editPromiseArr.value.length - 1].promise();
  }
};

// 生成新图, 创建一个空的模板
const addImg = () => {
  const text = currentScene_des.value.trim();
  const material_name = text > 6 ? text.substring(0, 6) + "..." : text;
  const id = nanoid();
  subTitle.value?.[currentDrawerIndex.value?.index]?.material_list.push({
    id, // 唯一id
    scene_des: "", // 生成描述
    scene_type: "image", // 生成类型
    // 开始和结束时间
    start_time: 0,
    end_time: 3000,
    material_duration: 3000, // 时长
    material_size: 0, // 大小
    material_url: "", // 链接
    material_extension: "", // 后缀
    material_name,
    creatLoading: false,
    org_id: 1,
  });
  store.commit("INIT_SUBTITLES_DATA", subTitle.value);

  nextTick(() => {
    state.currentId = id;
    scrollToBottom(".img_content_box");
  });
};

// 滚动条滚动到最底部
const scrollToBottom = (className) => {
  const el = document.querySelector(className);
  el.scrollTo({
    left: el.scrollWidth,
    behavior: "smooth",
  });
};

// 切换镜头组
const prevGroup = (type) => {
  // 上一个
  if (type == "last") {
    if (currentDrawerIndex.value.index > 0) {
      currentDrawerIndex.value.index = currentDrawerIndex.value.index - 1;
      state.title_top = subTitle.value[currentDrawerIndex.value.index].name;
    }
  } else if (type == "next") {
    // 下一个
    if (currentDrawerIndex.value.index < subTitle.value.length - 1) {
      currentDrawerIndex.value.index = currentDrawerIndex.value.index + 1;
      state.title_top = subTitle.value[currentDrawerIndex.value.index].name;
    }
  }
  nextTick(() => {
    AddDefaultMaterial();
    // state.currentId = imgList.value?.[0]?.id || ''
  });
};

// 切换上一个或者下一个图片
const leftNext = () => {
  if (!state.currentId) {
    state.currentId = imgList.value[0].id;
    return;
  }
  const index = imgList.value.findIndex((ele) => ele.id == state.currentId);
  if (index >= 1) {
    state.currentId = imgList.value[index - 1].id;
  }
};

const rightNext = () => {
  if (!state.currentId) {
    state.currentId = imgList.value[0].id;
    return;
  }
  const index = imgList.value.findIndex((ele) => ele.id == state.currentId);
  if (index < imgList.value.length - 1) {
    state.currentId = imgList.value[index + 1].id;
  }
};

// 添加默认素材
const AddDefaultMaterial = () => {
  if (imgList.value.length == 0) {
    const id = nanoid();
    subTitle.value?.[currentDrawerIndex.value?.index]?.material_list.push({
      id, // 唯一id
      scene_des: "", // 生成描述
      scene_type: "image", // 生成类型
      // 开始和结束时间
      start_time: 0,
      end_time: 3000,
      material_duration: 3000, // 时长
      material_size: 0, // 大小
      material_url: "", // 链接
      material_extension: "", // 后缀
      material_name: "默认素材",
      creatLoading: false,
      org_id: 1,
    });
    store.commit("INIT_SUBTITLES_DATA", subTitle.value);
  }
  state.currentId = imgList.value?.[0].id;
};

const delItem = (id) => {
  const index = subTitle.value?.[
    currentDrawerIndex.value?.index
  ]?.material_list.findIndex((e) => e.id == id);

  index != -1 &&
    (() => {
      subTitle.value?.[currentDrawerIndex.value?.index]?.material_list.splice(
        index,
        1
      );
      store.commit("INIT_SUBTITLES_DATA", subTitle.value);
    })();
};

const open = (index) => {
  currentDrawerIndex.value = index.index;
  // 克隆数据, 用于修改 最后保存
  store.commit(
    "INIT_SUBTITLES_DATA",
    JSON.parse(JSON.stringify([...VideoMashup.value.resource_data]))
  );
  state.title_top = subTitle.value[currentDrawerIndex.value].name;

  nextTick(() => {
    // 默认添加一个素菜
    AddDefaultMaterial();
  });
  // 存储当前编辑的下标
  store.commit("CHANGE_CURRENT_INDEX", JSON.parse(JSON.stringify(index)));

  state.visible = true;
  nextTick(() => {
    // 初始默认选中
    const id = props.aiModelList.find((ele) => ele.selected == 1)?.id || "";
    !!Ai_styleRef.value && Ai_styleRef.value.checkedFn(id);
  });
};

// 打开素材库弹窗
const materiallibraryShow = ref(false);
const openMaterial = () => {
  materiallibraryShow.value = true;
};
const close = () => {
  // 判断是否还有正在生成的内容

  Modal.confirm({
    title: "提示",
    icon: createVNode(ExclamationCircleOutlined),
    content: "关闭后所有的修改都不会保存, 是否确认关闭?",
    cancelText: "取消关闭",
    okText: "确认关闭",
    onOk() {
      // 关闭所有异步操作
      AiCreatSwitch.value = false;
      state.visible = false;
      emit("changeChecked", modelId.value.modelId);
    },
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onCancel() {},
  });
};

// 文案库导入
const textImport = (type = "open") => {
  if (type == "open") {
    copyLibraryModal.value.showModal();
  } else {
    copyLibraryModal.value.closeModal();
  }
};

// 文案库选择回调
const closeChooseMaterial = async (data) => {
  console.log(data, "选择的文案");
  currentScene_des.value = data[0].material_content;
};

defineExpose({
  open,
  close,
});
</script>

<template>
  <div class="content">
    <!-- :keyboard="true" -->
    <a-drawer
      :destroyOnClose="true"
      v-model:visible="state.visible"
      placement="right"
      width="50%"
      :closable="false"
      style="z-index: 200 !important"
      :maskClosable="false"
      :keyboard="false"
      :bodyStyle="{
        minWidth: '420px',
        paddingTop: 0,
      }"
      getContainer=".content"
      @close="close"
    >
      <slot name="title">
        <div class="title_box">
          <div class="title_top">
            <h1 class="title">智能生图-{{ state.title_top }}</h1>
            <div class="close" @click="close">
              <CloseOutlined />
            </div>
          </div>
          <div class="title_bottom">
            <a-button
              @click="prevGroup('last')"
              class="btn_prev"
              style="margin-right: 10px"
              :disabled="currentDrawerIndex.index == 0"
              >上一个镜头组</a-button
            >
            <a-button
              @click="prevGroup('next')"
              class="btn_prev"
              :disabled="currentDrawerIndex.index == subTitle.length - 1"
              >下一个镜头组</a-button
            >
          </div>
        </div>
      </slot>

      <a-spin
        :indicator="indicator"
        :spinning="state.spinning"
        style="margin-top: 25%"
      >
        <div class="content_min_box">
          <!-- ai配图风格 -->

          <Ai_style
            ref="Ai_styleRef"
            :aiModelList="props.aiModelList"
            :showSelect="true"
          ></Ai_style>

          <!-- <div class="content_item_box_ai_illustration">
            <div class="ai_illustration">
              <div class="style_item" :class="{
                'active_select': modelId == i.id
              }" v-for="i in props.aiModelList.slice(0, state.sliceNum)" :key="i.id" @click="modelId = i.id">
                <div class="isSelect" v-show="modelId == i.id">
                  <CheckOutlined :style="{
                    'font-weight': 900
                  }" />
                </div>
                <img :src="i.example_img" alt="">
                <span class="desc">{{ i.name }}</span>
              </div>
            </div>
            <a-button type="dashed" style="margin: 15px 0 20px;" @click="showMore"
              v-show="props.aiModelList.length > 12">
              {{ state.sliceNum < props.aiModelList.length ? '查看更多' : '收起更多' }}</a-button>
          </div> -->

          <!-- 头部图片预览 -->
          <div class="content_top_img_box">
            <div class="content_top_img">
              <img :src="currentImgUrl" alt="" v-if="!!currentImgUrl" />
              <div class="placeholder" v-else>
                <span>暂无画面</span>
                <span>可在右侧面板编辑</span>
              </div>
              <div class="desc_box">
                <div class="desc_content">
                  {{ currentText }}
                </div>
              </div>
            </div>
            <div class="content_img_desc">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                "
              >
                <span class="title">场景描述</span>
                <a-button
                  type="link"
                  size="small"
                  @click="textImport('open')"
                  class="import_meatiner_btn"
                  >文案导入</a-button
                >
              </div>
              <a-textarea
                :disabled="!state.currentId || creatLoading"
                v-model:value="currentScene_des"
                placeholder="建议使用中文描述画面中的主体、场景等，可以尝试在顶部选择一个风格来固定整体画风~"
                :rows="9"
                allow-clear
              />
              <a-button
                type="primary"
                :disabled="!state.currentId"
                :loading="creatLoading"
                @click="creatAiImg"
                >重绘当前画面</a-button
              >
            </div>
          </div>

          <!-- https://bailing-1305744786.cos.ap-nanjing.myqcloud…ing/20240612/a268ba142214c1bbd95fb13d6090c548.png -->

          <!-- 段落图片预览 -->
          <div class="content_bottom_img_box">
            <sapan class="bottom_title_num"
              >当前段落图片 ({{ imgList.length }})</sapan
            >

            <div class="select_img_box">
              <div class="left_next next" @click="leftNext">
                <LeftOutlined class="left"></LeftOutlined>
              </div>
              <div class="img_content_box">
                <!-- <div class="creat_new_img img_content_item" @click="addImg">
                  <PlusCircleOutlined class="icon"></PlusCircleOutlined>
                  <span>生成新图</span>
                </div> -->

                <div
                  class="img_content_item"
                  v-for="(i, index) in imgList"
                  :key="i.id"
                  @click="selectItem(i.id)"
                  :class="{
                    active_item: state.currentId == i.id,
                  }"
                  :style="{
                    background: !!i.material_url ? '#0000000a' : 'transparent',
                  }"
                >
                  <a-spin :indicator="indicator" :spinning="i.creatLoading">
                    <div class="content_box">
                      <a-tag
                        class="select_tag"
                        :style="{ opacity: state.currentId == i.id ? 1 : 0 }"
                        color="#2878ff"
                        >当前选中</a-tag
                      >

                      <a-popconfirm
                        title="确定删除此项吗?"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="delItem(i.id)"
                      >
                        <a-button
                          @click.stop="() => {}"
                          class="del_btn"
                          v-if="imgList.length != 1"
                          type="link"
                          danger
                          >删除</a-button
                        >
                      </a-popconfirm>

                      <img
                        :src="i.material_url"
                        alt=""
                        v-if="!!i.material_url"
                      />
                      <div class="placeholder" v-else>
                        <span>暂无画面</span>
                      </div>
                    </div>
                  </a-spin>
                </div>

                <!-- <div class="img_content_item active_item">
                  <a-tag class="select_tag" v-show="true" color="#2878ff"
                    >当前选中</a-tag
                  >
                  <div class="placeholder">
                    <span>暂无画面</span>
                  </div>
                </div> -->
                <!-- <div class="img_content_item active_item">
                  <a-tag class="select_tag" v-show="true" color="#2878ff"
                    >当前选中</a-tag
                  >
                  <div class="placeholder">
                    <span>暂无画面</span>
                  </div>
                </div> -->
              </div>
              <div class="right_next next" @click="rightNext">
                <RightOutlined class="right"></RightOutlined>
              </div>
            </div>
          </div>

          <!-- 生成新图按钮 -->
          <a-button
            size="large"
            type="primary"
            ghost
            style="width: 100%; margin-top: 20px; font-size: 13px"
            @click="addImg"
            ><plus-outlined />生成新图</a-button
          >
        </div>
      </a-spin>

      <template #footer>
        <div class="bottom_btn">
          <a-button style="margin-right: 15px" @click="close">取消</a-button>
          <a-button type="primary" @click="submitConfirm">导入素材</a-button>
        </div>
      </template>
    </a-drawer>
  </div>
  <!-- 素材库弹窗 -->
  <ChooseMaterial
    :isClip="true"
    material_type="text"
    :multiple="true"
    :visible="materiallibraryShow"
    @close="closeChooseMaterial($event, 'material_type')"
  />

  <!-- 文案库 -->
  <CopyLibraryModal
    ref="copyLibraryModal"
    selectType="radio"
    @importSuccess="closeChooseMaterial"
  />
</template>

<style lang="less" scoped>
// @border_color: #d8d8d8;
@border_color: transparent;
@radius: 10px;
@active_color: #5297ff;

.content {
  .content_min_box {
    padding-top: 20px;

    // 智能生图模型列表
    .content_item_box_ai_illustration {
      display: flex;
      flex-direction: column;

      .ai_illustration {
        width: 99%;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 15px;

        .style_item {
          width: 100px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          cursor: pointer;
          position: relative;

          &:hover {
            & img {
              border-color: var(--ss-primary-6);
            }
          }

          &.active_select {
            img {
              border-color: var(--ss-primary-6);
            }
          }

          .desc {
            font-size: 12px;
            color: rgb(54, 54, 54);
            // 单行显示 溢出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          img {
            height: 88px;
            width: 100%;
            border-radius: 6px;
            overflow: hidden;
            object-fit: cover;
            border: 1px solid transparent;
          }

          .isSelect {
            position: absolute;
            top: 5px;
            right: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 19px;
            height: 19px;
            color: #fff;
            font-weight: 900;
            background-color: var(--ss-primary-6);
          }
        }
      }
    }

    // 头部图片预览
    .content_top_img_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;

      .content_top_img {
        background: #000;
        border: 1px solid @border_color;
        border-radius: @radius;
        overflow: hidden;
        width: 60%;
        height: 280px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          height: 100%;
          object-fit: cover;
        }

        .placeholder {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          span {
            color: #fff;
          }
        }

        .desc_box {
          position: absolute;
          // height: 30px;
          width: 100%;
          bottom: 0;
          left: 0;
          padding: 0 10px;

          .desc_content {
            padding: 0 8px;
            margin-bottom: 10px;
            background: #00000070;
            color: #fff;
            // 显示单行 多余变为省略号
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            text-align: center;
            line-height: 38px;
          }
        }
      }

      .content_img_desc {
        flex: 1;
        height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .import_meatiner_btn {
          transition: all 0.3s;
          opacity: 0;
        }

        &:hover .import_meatiner_btn {
          opacity: 1;
        }

        :deep(.ant-input) {
          resize: none;
          padding-right: 14px;

          &::-webkit-scrollbar {
            height: 5px;
            /* 滚动条的高度 */
            width: 8px;
            // display: none;
          }

          &::-webkit-scrollbar-thumb {
            background: #888;
            /* 滑块的背景颜色 */
            border-radius: 10px;
            /* 滑块的圆角 */
          }

          &::-webkit-scrollbar-track {
            background: #f1f1f1;
            /* 轨道的背景色 */
            border-radius: 10px;
            /* 轨道的圆角 */
          }
        }
      }
    }

    // 段落图片预览
    .content_bottom_img_box {
      padding: 15px;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      border: 1px solid @border_color;
      border-radius: @radius;

      .bottom_title_num {
        font-size: 14px;
        margin-bottom: 10px;
      }

      .select_img_box {
        // height: 200px;
        display: flex;
        align-items: center;

        // justify-content: space-between;
        // 左右按钮
        .next {
          height: 155px;
          width: 45px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid @border_color;
          border-radius: 5px;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            // background: #5297ff;
            border-color: @active_color;
            color: @active_color;
          }
        }

        .img_content_box {
          flex: 1;
          display: flex;
          padding: 8px 20px;
          overflow-x: auto;
          white-space: nowrap; // 防止子元素换行

          &:hover {
            &::-webkit-scrollbar {
              display: block;
            }

            // padding-bottom: 0;
          }

          &::-webkit-scrollbar {
            height: 8px;
            /* 滚动条的高度 */
            // display: none;
          }

          &::-webkit-scrollbar-thumb {
            background: #888;
            /* 滑块的背景颜色 */
            border-radius: 10px;
            /* 滑块的圆角 */
          }

          &::-webkit-scrollbar-track {
            background: #f1f1f1;
            /* 轨道的背景色 */
            border-radius: 10px;
            /* 轨道的圆角 */
          }

          // 每一项公用的样式
          .img_content_item {
            height: 155px;
            min-width: 240px;
            cursor: pointer;
            // height: 150px;
            // min-width: 280px;
            margin: 3px 8px;
            border: 2px solid @border_color;
            transition: all 0.3s;

            &:hover {
              border-color: @active_color;
            }

            .content_box {
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative;
              height: 151px;
              width: 240px;
              overflow: hidden;
              background: #000;

              &:hover {
                & .del_btn {
                  opacity: 1;
                }
              }

              img {
                height: 100%;
                width: auto;
                object-fit: contain;
              }

              .select_tag {
                position: absolute;
                left: 5px;
                top: 5px;
              }

              .del_btn {
                position: absolute;
                right: 5px;
                top: 5px;
                padding: 0;
                height: 22px;
                opacity: 0;
                transition: opacity 0.3s;
              }
            }

            &.active_item {
              border: 2px solid @active_color;
              // & .content_box{
              //   height: 126px;
              // }
            }

            .placeholder {
              span {
                color: #fff;
              }
            }
          }

          .creat_new_img {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            border: 2px solid @border_color;

            .icon {
              font-size: 30px;
            }

            &:hover {
              color: @active_color;
            }
          }
        }
      }
    }
  }

  // 头部样式
  .title_box {
    width: 100%;
    padding-bottom: 10px;
    padding-top: 24px;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 999;

    &::after {
      content: "";
      height: 1px;
      width: calc(100% + 48px);
      background-color: #e8e8e8;
      position: absolute;
      bottom: 0;
      left: -24px;
    }

    .title_top {
      display: flex;
      justify-content: space-between;
      color: #0c0d0e;

      // margin-bottom: 10px;
      h1 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 4px;
      }

      .close {
        cursor: pointer;
        text-align: center;
        line-height: 29px;
        padding: 0 6px;

        &:hover {
          background-color: #f3f3f4;
        }
      }
    }

    .title_bottom {
      .btn_prev {
        border-radius: 5px;
        padding: 0 16px;
        font-size: 12px;
        height: 28px;
      }
    }
  }

  // 底部样式
  .bottom_btn {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
